<template>
  <div class="table_continer">
    <div style="position: absolute;top: -50px;right: 0px">
      <right-toolbar @queryTable="updateFlag" :columns="columns" />
    </div>
    <div v-if="tableflag">
      <!-- 列表 ------------------------------------------------------------------------------------------------------->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column prop="equipmentName" label="序号" width="100">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[0].visible" prop="supplierNum" label="维修工单号" min-width="170">
          <template slot-scope="scope">
            <el-link type="primary" @click="handledetailed(scope.row.repairId)">{{ scope.row.repairNum || '-' }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[1].visible" prop="repairEquipmentAccountVo.eaPartInfoVo.equipmentNum"
          label="设备编号" min-width="120" />
        <el-table-column v-if="columns[2].visible" prop="repairEquipmentAccountVo.eaPartInfoVo.equipmentName"
          label="设备名称" min-width="120" show-overflow-tooltip />
        <el-table-column v-if="columns[3].visible" prop="createTime" label="报障时间" min-width="150" />
        <el-table-column v-if="columns[4].visible" prop="createBy" label="报障人" min-width="120" />
        <el-table-column v-if="columns[5].visible" prop="createTime" label="设备状态" min-width="120">
          <template slot-scope="{row}">
            <div :style="'color:' + ['#67C23A', '#E6A23C', '#409EFF', '#F56C6C'][row.repairEquipmentAccountVo.status]">
              <i
                :class="['el-icon-circle-check', 'el-icon-warning-outline', 'el-icon-remove-outline', 'el-icon-circle-close'][row.repairEquipmentAccountVo.status]" />
              <span>
                {{ ['正常', '带病运行', '检修中', '故障'][row.repairEquipmentAccountVo.status] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[6].visible" prop="repairEquipmentAccountVo.eaPartInfoVo.deptName" label="设备所属部门"
          show-overflow-tooltip min-width="120" />
        <el-table-column v-if="columns[7].visible" prop="status" label="故障等级" min-width="120">
          <template slot-scope="{row}">
            <div :style="'color:' + ['#F56C6C', '#E6A23C', '#409EFF'][row.faultLevel]">
              <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.faultLevel]" /> -->
              <span>
                {{ ['紧急 ', '严重 ', '一般'][row.faultLevel] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[8].visible" prop="faultDescribe" label="故障描述" min-width="170"
          show-overflow-tooltip />
        <el-table-column v-if="columns[9].visible" label="分派状态" min-width="120">
          <template slot-scope="{row}">
            <div :style="'color:' + ['#F56C6C', '#67C23A'][row.assignStatus]">
              <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.assignStatus]" /> -->
              <span>
                {{ ['待分派', '已分派'][row.assignStatus] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[10].visible" prop="remark" label="维修状态" min-width="120">
          <template slot-scope="{row}">
            <div :style="'color:' + ['#E6A23C', '#409EFF', '#67C23A', '#F56C6C'][row.repairStatus]">
              <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.assignStatus]" /> -->
              <span>
                {{ ['待维修', '维修中', '已解决', '故障'][row.repairStatus] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[11].visible" label="处理人" min-width="120" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.repairerNames || '-' }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns[12].visible" label="维修方式" min-width="120">
          <template slot-scope="{row}">
            <div :style="'color:' + ['#67C23A', '#E6A23C'][row.repairMode]">
              <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.assignStatus]" /> -->
              <span>
                {{ ['自修', '委外'][row.repairMode] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[13].visible" label="维修完成时间" min-width="170">
          <template slot-scope="{row}">
            {{ row.repairTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns[14].visible" prop="describe" label="来源" min-width="170">
          <template slot-scope="{row}">
            <div>
              <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.assignStatus]" /> -->
              <span>
                {{ ['新增', '设备报修', '委外新增', '巡检'][row.source] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="columns[15].visible" label="备注" min-width="170" show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.remark || '-' }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns[16].visible" label="创建部门" align="center" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
        <el-table-column v-if="columns[17].visible" label="创建人" align="center" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.createBy || '-' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="{row}">
            <!--  v-if="row.assignStatus == 0" -->
            <el-button type="primary" v-hasPermi="['guysingle_left_assign']" size="small" icon="el-icon-s-ticket"
              :disabled="!(row.assignStatus == 0)" @click="handleEdit(row.repairId)">分派</el-button>
            <!-- v-if="row.source == 0 && row.assignStatus == 0" -->
            <el-button type="primary" v-hasPermi="['guysingle_left_update']"
              :disabled="!(row.source == 0 && row.assignStatus == 0)" icon="el-icon-edit" size="small"
              @click="handleAlter(row.repairId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ------------------------------------------------------------------------------------------------------------>
    </div>
    <!-- --------------------------------分页器---------------------------------------------------------- -->
    <div class="table_continer_pagination">
      <el-pagination background :current-page="pageParams.pageNum" :page-sizes="[10, 20, 50, 100]"
        :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/** 拉取列表远程方法 ---------------------------------------------------------------------------------------------------------- */
import { list } from '@/api/maintenance/management/guySingle.js'
import { getcolumnslist, Updatecolumns } from '@/api/menu.js'
/** ------------------------------------------------------------------------------------------------------------------------- */
import { pageCount } from '@/utils/pagination'
/** 查询参数处理 ---------------------------------------------------------------------------------------------------------- */
function processQueryParams (queryParams, pageParams) {
  const params = Object.assign({}, queryParams, pageParams)
  return params
}
/** ------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'PaginationTable',
  data () {
    return {
      columns: [
        { key: 0, label: `维修工单号`, visible: true, disabled: true },
        { key: 1, label: `设备编号`, visible: true },
        { key: 2, label: `设备名称`, visible: true },
        { key: 3, label: `报障时间`, visible: true },
        { key: 4, label: `报障人`, visible: true, },
        { key: 5, label: `设备状态`, visible: true, },
        { key: 6, label: `设备所属部门`, visible: true },
        { key: 7, label: `故障等级`, visible: true, },
        { key: 8, label: `故障描述`, visible: true, },
        { key: 9, label: `分派状态`, visible: true, },
        { key: 10, label: `维修状态`, visible: true },
        { key: 11, label: `处理人`, visible: true },
        { key: 12, label: `维修方式`, visible: true },
        { key: 13, label: `维修完成时间`, visible: true },
        { key: 14, label: `来源`, visible: true },
        { key: 15, label: `备注`, visible: true },
        { key: 16, label: `创建部门`, visible: true },
        { key: 17, label: `创建人`, visible: true },
      ],
      pagination: {
        total: 1,
        pageCount: 1
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        /** 列表默认排序字段 ---------------------------------------------------------------------------------------------------------- */
        orderByColumn: 'repairId',
        /** ------------------------------------------------------------------------------------------------------------------------- */
        isAsc: 'desc'
      },
      queryParams: null,
      tableData: [],
      multipleSelection: [],
      tableflag: true
    }
  },
  mounted () {
    this.refreshList();
    this.getcolumns();
  },
  watch: {
    columns: {//监听动态列修改调用更新方法
      handler (val) {
        this.tableflag = false
        this.updateFlag()
      },
      deep: true
    }
  },
  methods: {
    /**更新动态列数据 */
    async updateFlag () {
      let params = {
        viewKey: 'repair_left',
        columnFlag: JSON.stringify(this.columns)
      }
      await Updatecolumns(params)
      this.tableflag = true
      // this.getcolumns()
    },
    /**查询动态列数据 */
    async getcolumns () {
      let { data: data } = await getcolumnslist({ 'viewKey': 'repair_left' })
      console.log(data);
      let str = ''
      if (data.length !== 0) {
        data.map(item => {
          if (item.viewKey === 'repair_left') {
            // str = JSON.parse(eval('(' + item.columnFlag + ')'))
            str = JSON.parse(item.columnFlag)
            return false
          }
        })
        this.columns = str
      }
    },
    refreshList () {
      const params = processQueryParams(this.queryParams, this.pageParams)
      console.log('查询参数', params);
      // --------consolelog('查询参数', params)
      list(params).then((res) => {
        console.log('获取列表', res);
        // --------consolelog('获取列表', res)
        this.pagination.total = res.total
        this.pagination.pageCount = pageCount(this.pagination.total, this.pageParams.pageSize)
        this.tableData = res.data
      })
    },
    handleQuery (queryParams) {
      this.queryParams = queryParams
      this.refreshList()
    },
    handleSizeChange (value) {
      this.pageParams.pageSize = value
      this.refreshList()
    },
    handleCurrentChange (value) {
      this.pageParams.pageNum = value
      this.refreshList()
    },
    handleSelectionChange (value) {
      // console.log('handleSelectionChange', value)
    },
    // 点击编号跳转基值详情-----------------------------
    handledetailed (id) {
      this.$emit('click_create_reception', id)
    },
    /** 传递点击【分派】事件 ---------------------------------------------------------------------------------------------------------- */
    handleEdit (id) {
      this.$emit('click_edit', id)
    },
    // 传递点击【编辑】事件------------------------------------------------------------------------------------------------------------------
    handleAlter (id) {
      this.$emit('click_alter', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.table_continer {
  position: relative;

  &_pagination {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
}

.table_left {
  display: flex;
  justify-content: left;
}
</style>
